<template>
  <div>
    <div :style="{display:'flex',flexDirection:'row',alignItems:'center',height:'50px',borderBottomWidth:'1px',borderBottomColor:'#ececec',borderBottomStyle:'solid'}">
      <div :style="{paddingLeft:'10px'}">用户名&nbsp;&nbsp;&nbsp;：</div>
      <input type="text"  placeholder="6-15位数字、字母" v-on:input="userChange" >
    </div>

    <div :style="{display:'flex',flexDirection:'row',alignItems:'center',height:'50px',borderBottomWidth:'1px',borderBottomColor:'#ececec',borderBottomStyle:'solid'}">
      <div :style="{paddingLeft:'10px'}">设置密码：</div>
      <input type="password"  placeholder="6-15位数字、字母" v-on:input="pwdChange" >
    </div>

    <div :style="{display:'flex',flexDirection:'row',alignItems:'center',height:'50px',borderBottomWidth:'1px',borderBottomColor:'#ececec',borderBottomStyle:'solid'}">
      <div :style="{paddingLeft:'10px'}">确认密码：</div>
      <input type="password"  placeholder="请重新输入密码" v-on:input="againPwdChange" >
    </div>
    <div :style="{display:'flex',flexDirection:'row',alignItems:'center',height:'50px',borderBottomWidth:'1px',borderBottomColor:'#ececec',borderBottomStyle:'solid'}">
      <div :style="{paddingLeft:'10px'}">手机号&nbsp;&nbsp;&nbsp;：</div>
      <input type="text"  placeholder="请输入手机号" v-on:input="phoneChange" >
    </div>

    <div :style="{display:'flex',flexDirection:'row',alignItems:'center',justifyContent:'space-between',height:'50px',borderBottomWidth:'1px',borderBottomColor:'#ececec',borderBottomStyle:'solid'}">
        <div :style="{display:'flex',flexDirection:'row'}">
        <div :style="{paddingLeft:'10px'}">验证码：&nbsp;&nbsp;&nbsp;</div>
        <input type="text"  placeholder="输入验证码" v-on:input="Verification" >
      </div>
      <div
        v-on:click="getMobileCode()"
        :style="{color:'red'}">获取验证码</div>
    </div>
    <div :style="{paddingLeft:'10px',marginTop:'10px'}">
      注册默认您已阅读并理解我们的
      <div :style="{color:'red',fontSize:'18px'}">网站协议</div>
    </div>
    <div
      v-on:click="reqRegist()"
      :style="{width:'100%',height:'50px',background:'#4dc1c1',color:'#fff',textAlign:'center',lineHeight:'50px',marginTop:'50px'}">
      注册
    </div>
  </div>

</template>

<script>
  import {registUrl,getMobileReqCode} from "../../netWork/UserApi";
  import { Toast } from 'mint-ui';
  export default {
    name: "regist",
    components: {

    },
    data(){
      return{
        userName:'',
        pwdName:'',
        againPwdName:'',
        phoneName:'',
        VerificationName:''
      }
    },
    mounted: function() {
      // this.reqRegist();
    },
    methods:{
      userChange(e){
        let userName=e.target.value;
        this.userName=userName;
      },
      pwdChange(e){
        let pwdName=e.target.value;
        this.pwdName=pwdName;

      },
      againPwdChange(e){
        let againPwdName=e.target.value;
        this.againPwdName=againPwdName
      },
      phoneChange(e){
        let phoneName=e.target.value;
        this.phoneName=phoneName;

      },
      Verification(e){
        let VerificationName=e.target.value;
        this.VerificationName=VerificationName;
      },
      getMobileCode(){
        let fromData={
          mobile:this.phoneName,
          type:'register'
        };
        getMobileReqCode(fromData,(responseData)=>{
          if(responseData['code']==='1'){
            Toast({
              message: responseData['msg'],
              position: 'center',
              duration: 1000
            });
          }else {
            Toast({
              message: responseData['msg'],
              position: 'center',
              duration: 1000
            });
          }
        })
      },
      reqRegist(){
        let fromData={
          username: this.userName,
          password: this.pwdName,
          comitpassword:this.againPwdName,
          mobile:this.phoneName,
          mobile_code:this.VerificationName
        };
        registUrl(fromData,(responseData)=>{
          // console.log(responseData,"11111111")
          if (responseData['code'] === '1') {
            window.history.back();
            Toast({
              message: responseData['msg'],
              position: 'center',
              duration: 1000
            });
          }else {
            Toast({
              message: responseData['msg'],
              position: 'center',
              duration: 1000
            });
          }
        })
      }
    }
  }

</script>

<style scoped>

</style>
